<template>
	<view class="input-box">
		<picker :disabled="disabled" mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :range="multiArray" :range-key="map.name || 'name'">
			<view class="picker" :class="disabled ? 'text-grey' : ''" @click="init">
				<text class="text-grey" style="font-size: 12px" v-if="!chooseObj.value">请选择</text>
				{{ chooseObj[map.fullName] }}&nbsp;
			</view>
		</picker>
	</view>
</template>
<script>
export default {
	props: {
		/**
		 * 数据源
		 * 简单数据类型结构，键值需要至少包含映射key
		 */
		sourceData: {
			type: Array,
			default() {
				return [];
			}
		},
		/**
		 * 数据映射
		 */
		map: {
			type: Object,
			default() {
				return {
					id: 'id',
					name: 'name',
					fullName: 'fullName',
					parentId: 'parentId'
				};
			}
		},
		// 绑定值，可以是主键ID或者对象（对象至少需要包含主键id，如果包含了id，fullName则程序会减少一步找数据时间）
		modelValue: {
			type: [Object, String],
			default() {
				return '';
			}
		},
		// 禁用
		disabled: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	emits: ['update:modelValue', 'change'],
	watch: {
		modelValue: {
			handler(val, oldVal) {
				if (typeof val === 'string') {
					if (val) {
						const choose = this.sourceData.filter((v) => v.id === val || v.code === val);
						if (choose && choose.length > 0) {
							this.chooseObj = choose[0];
						}
					}
				} else {
					if (val[this.map.fullName]) {
						this.chooseObj = val;
					} else {
						if (val[this.map.id]) {
							const choose = this.sourceData.filter((v) => v.id === val[this.map.id]);
							if (choose && choose.length > 0) {
								this.chooseObj = choose[0];
							}
						}
					}
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			multiArray: [],
			index: 0,
			multiIndex: 0,
			chooseObj: {}
		};
	},
	methods: {
		MultiChange(e) {
			const { value } = e.detail;
			// for (var i = 0; i < value.length; i++) {
			// 	this.chooseValue.push(this.multiArray[i][value[i]])
			// }
			const length = value.length;
			this.chooseObj = this.multiArray[length - 1][value[length - 1]];
			this.$emit('update:modelValue', this.chooseObj);
			this.$emit('change', this.chooseObj);
		},
		MultiColumnChange(e) {
			const { column, value } = e.detail;
			const chooseObj = this.multiArray[column][value];
			if (this.multiArray.length > column + 1) {
				// 说明还有下级数据，需要刷新下级数据
				const length = this.multiArray.length;
				for (var i = 0; i < length - (column + 1); i++) {
					this.multiArray.pop();
				}
				this.loadData(chooseObj.id);
			}
		},
		init() {
			this.multiArray = [];
			this.loadData('0');
		},
		loadData(pid) {
			if (this.sourceData && this.sourceData.length > 0) {
				const arrar = this.sourceData.filter((d) => d[this.map.parentId] === pid);
				if (arrar.length > 0) {
					this.multiArray.push(arrar);
					const first = arrar[0];
					this.loadData(first.id);
				}
			}
		}
	}
};
</script>
<style scoped>
.input-box {
	position: relative;
	overflow: hidden;
	flex: 1;
	line-height: 1;
	font-size: 14px;
	flex-direction: row;
	align-items: center;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 12px 15px;
}
.text-grey {
	color: #999;
}
</style>
